<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='zhht' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

        <input type="hidden" name="_method" value="POST"/>

        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='fpzp' /></label>
            <div class="layui-input-block">
                <a type="button" id="choose-commissionFinal-invoice" value="<fmt:message key='shaungchuan' />" class="layui-btn layui-btn-sm layui-btn-normal">上传发票照片</a>
                <div id="feijinImage-commissionFinal-invoice">
                    <img src="${web_domain}/resources/images/default.jpeg" id="default-image" style="width:120px;height:120px;margin-top:10px;">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spsh' /></label>
            <div class="layui-input-block">
                <input type="text" id="invoiceNo" class="layui-input" placeholder="<fmt:message key='qtxfph' />" style="width: 300px;"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='fpdsfs' /></label>
            <div class="layui-input-block">
                <input type="radio" name="type" lay-filter="type" value="1" title="<fmt:message key='kd' />"/>
                <input type="radio" name="type" lay-filter="type" value="2" title="<fmt:message key='qita' />"/>
            </div>
        </div>

        <div class="layui-form-item feijin-expressage" style="display:none;">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='kdgs' /></label>
            <div class="layui-input-block">
                <input type="text" id="expressage" class="layui-input" placeholder="<fmt:message key='kdgsmc' />" style="width: 300px;"/>
            </div>
        </div>

        <div class="layui-form-item feijin-expressage" style="display:none;">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='kddh' /></label>
            <div class="layui-input-block">
                <input type="text" id="expressageNo" class="layui-input" placeholder="<fmt:message key='kddh' />" style="width: 300px;"/>
            </div>
        </div>

        <div class="layui-form-item feijin-note" style="display:none;">
            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='qita' /></label>
            <div class="layui-input-block">
                <input type="text" id="note" class="layui-input" placeholder="<fmt:message key='qtdsfs' />" style="width: 300px;"/>
            </div>
        </div>

        <div style="background: #fff3e0;border: 1px solid #ff9966;padding: 15px 2.5%;border-radius: 5px;" class="layui-show">

            <p><fmt:message key='kpxz' /></p>
            <br/>
            <p><fmt:message key='fplxzzpt' /></p>

            <p><fmt:message key='fp1' /></p>
            <p><fmt:message key='fp2' /></p>
            <p><fmt:message key='fp3' /></p>
            <p><fmt:message key='fp4' /></p>
            <p><fmt:message key='fp5' /></p>
            <p><fmt:message key='fp6' /></p>
            <br/>
            <p><fmt:message key='fp7' /></p>
            <p><fmt:message key='fp8' /></p>
            <p><fmt:message key='fp9' /></p>
            <p><fmt:message key='fp10' /></p>
            <p><fmt:message key='fp11' /></p>
            <br/>
            <p><fmt:message key='fp12' /></p>
            <p><fmt:message key='fp13' /></p>
            <p><fmt:message key='fp14' /></p>

        </div>

        <div class="layui-input-block">
            <input type="hidden" id="expressageType"/>
            <div style="display: none"><input type="button" value="保存" class="layui-btn" id="submit" lay-filter="submit" lay-submit></div>
        </div>

    </div>
</div>
<div style="display:none">
    <%--<form action="${web_domain}/upload/image" method="post" id="upload-commissionFinal-invoice" enctype="multipart/form-data">--%>
    <input id="commissionFinal-invoice"/>
    <%--</form>--%>

    <!-- 多图上传开始 -->
    <script>
        window.EASY_UPLOAD_HOME_URL = "${web_domain}/uploads/";
    </script>
    <script type="text/javascript" src="${web_domain}/uploads/ueditor.config.js"></script>
    <script type="text/javascript" src="${web_domain}/uploads/ueditor.all.js"></script>
    <script type="text/plain" id="uploadsPlugin"></script>
    <!-- 多图上传结束 -->
</div>
<script>

    //多图上传成功后的回调
    function uploadSuccessCallback(url, original) {
        $("#default-image").remove();
        $("#commissionFinal-invoice").attr("value", $("#commissionFinal-invoice").val() + original + ";");
        $("#feijinImage-commissionFinal-invoice").html($("#feijinImage-commissionFinal-invoice").html() + "<img src='${store_domain}/uploads/" + original + "' style='width:120px;height:120px;margin-top:10px;' />'");
    }

    $(function () {

        //多图上传插件
        EASY_UP.getEditor('uploadsPlugin').addListener("ready", function () {

            var id = $('.edui-for-insertimage').attr('id'); //加载完成后，通过此代码可以获取当前多图上传插件的动态id,edui-for-insertimage 是多图上传插件的class name
            var multisUploadsPlugin = $EDITORUI[id];

            //多图上传-发票
            $("#choose-commissionFinal-invoice").click(function () {
                multisUploadsPlugin._onClick(event, this);
            });
        });


    });

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form;

        form.on('radio(type)', function (data) {
            var id = data.value;

            if (id == 1) {
                $(".feijin-note").hide();
                $(".feijin-expressage").show();
                $("#expressageType").attr("value", 1);
            }

            if (id == 2) {
                $(".feijin-expressage").hide();
                $(".feijin-note").show();
                $("#expressageType").attr("value", 2);
            }

        });

        form.on('submit(submit)', function (data) {

            var type = $(":radio[name='type']:checked").val();

            if ($("#commissionFinal-invoice").val() == "") {

                layui.use('layer', function () {
                    layer.msg("<fmt:message key='qscfpzp' />");
                });

                return false;
            }

            if ($("#invoiceNo").val() == "") {

                layui.use('layer', function () {
                    layer.msg("<fmt:message key='qtxfph' />");
                });

                return false;
            }

            if (!type) {
                layui.use('layer', function () {
                    layer.msg("<fmt:message key='qxzfpdsfs' />");
                });
                return false;
            }

            if (type == 1) {

                if ($("#expressage").val() == "") {
                    layui.use('layer', function () {
                        layer.msg("<fmt:message key='qtxkdgsmc' />");
                    });
                    return false;
                }

                if ($("#expressageNo").val() == "") {
                    layui.use('layer', function () {
                        layer.msg("<fmt:message key='qtxkddh' />");
                    });
                    return false;
                }
            }

            $.ajax({
                url: "${web_domain}/supplier/withdraw/invoice",
                data: {
                    "id": "${id}",
                    "invoice": $("#commissionFinal-invoice").val(),
                    "expressage": $("#expressage").val(),
                    "expressageNo": $("#expressageNo").val(),
                    "processNote": $("#note").val(),
                    "expressageType": $("#expressageType").val(),
                    "invoiceNo": $("#invoiceNo").val()

                },
                type: "post",
                dataType: "json",
                success: function (result) {
                    if (result.status) {
                        window.parent.location.reload();
                    } else {
                        layui.use('layer', function () {
                            layer.msg(result.message);
                        });
                    }
                }
            });


        });

    });
</script>
</body>
</fmt:bundle>
</html>